<template>
  <view class="temple-detail">
    <!-- 顶部图片 -->
    <view class="detail-header">
      <image class="header-image" :src="templeInfo.coverImage" mode="aspectFill" />
      <view class="header-overlay">
        <view class="temple-title">
          <text class="temple-subtitle">{{ templeInfo.subTitle }}</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="temple-content">
      <!-- 宗祠介绍 -->
      <view class="content-section">
        <view class="temple-title">
          <text>{{ templeInfo.templeName }}</text>
        </view>
        <view class="section-header">
          <view class="section-title">宗祠简介</view>
        </view>
        <view class="intro-content">
          <view class="intro-text">
            <!-- <text space="nbsp" decode v-html="templeInfo.intro"></text> -->
            <rich-text :nodes="templeInfo.intro"></rich-text>
          </view>
          <!-- 图片展示区域 -->
          <view v-if="imageList.length > 0 || videoList.length > 0" class="media-grid">
            <!-- 图片展示 -->
            <image
              v-for="(img, index) in imageList"
              :key="'img-' + index"
              class="grid-image"
              :src="img"
              mode="aspectFill"
              @click="previewMedia(img, 'image')"
            />
            <!-- 视频展示 -->
            <video
              v-for="(video, index) in videoList"
              :key="'video-' + index"
              class="grid-video"
              :src="video"
              :show-center-play-btn="true"
              :enable-progress-gesture="true"
              :autoplay="false"
              :muted="false"
              :loop="false"
              object-fit="cover"
              @click="previewMedia(video, 'video')"
            />
          </view>
        </view>
      </view>

      <!-- 历史渊源 -->
      <view v-if="historyList.length > 0" class="content-section">
        <view class="section-header">
          <view class="section-title">历史渊源</view>
        </view>
        <view class="history-content">
          <view v-for="(item, index) in historyList" :key="index" class="time-line">
            <view class="time-point"></view>
            <view class="time-content">
              <view class="time-year">{{ item.year }}</view>
              <view class="time-desc">{{ item.content }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 联系我们 -->
      <view class="content-section">
        <view class="section-header">
          <view class="section-title">联系我们</view>
        </view>
        <view class="contact-content">
          <Amap
            v-if="templeInfo.longitude && templeInfo.latitude"
            :center="[Number(templeInfo.longitude), Number(templeInfo.latitude)]"
            :zoom="13"
            :markers="markerList"
          />
          <view class="contact-info">
            <view class="contact-item">
              <text class="contact-label">地址：</text>
              <text class="contact-value">{{ templeInfo.location }}</text>
            </view>
            <view class="contact-item">
              <text class="contact-label">负责人：</text>
              <text class="contact-value">{{ templeInfo.manager }}</text>
            </view>
            <view class="contact-item">
              <text class="contact-label">电话：</text>
              <text class="contact-value">{{ templeInfo.managerPhone }}</text>
            </view>
            <view class="contact-item">
              <text class="contact-label">开放时间：</text>
              <text class="contact-value">{{ templeInfo.openingHours }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-overlay">
      <view class="loading-content">
        <text class="loading-text">加载中...</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { getTempleDetail } from "@/api/temple";
import Amap from "@/components/map/Amap.vue";

const markerList = ref<any[]>([]);
// 页面参数
const templeId = ref("");
// 宗祠信息
const templeInfo = ref<any>({});
// 加载状态
const loading = ref(true);

// 媒体文件列表
const mediaList = computed(() => {
  if (templeInfo.value.imageArray) {
    return templeInfo.value.imageArray.split(",");
  }
  return [];
});

// 图片列表（过滤图片格式）
const imageList = computed(() => {
  return mediaList.value.filter((item) => {
    const extension = item.split(".").pop()?.toLowerCase();
    return ["jpg", "jpeg", "png", "gif", "webp", "bmp"].includes(extension || "");
  });
});

// 视频列表（过滤视频格式）
const videoList = computed<string[]>(() => {
  return mediaList.value.filter((item) => {
    const extension = item.split(".").pop()?.toLowerCase();
    return ["mp4", "avi", "mov", "wmv", "flv", "webm", "mkv"].includes(extension || "");
  });
});

// 历史列表
const historyList = computed(() => {
  if (templeInfo.value.historyArray) {
    try {
      return JSON.parse(templeInfo.value.historyArray);
    } catch (e) {
      return [];
    }
  }
  return [];
});

// 获取宗祠详情
const fetchTempleDetail = async () => {
  loading.value = true;
  try {
    const res = await getTempleDetail(templeId.value);
    templeInfo.value = res;
    // 赋值markerList
    if (res.longitude && res.latitude) {
      markerList.value = [
        {
          position: [Number(res.longitude), Number(res.latitude)],
          title: res.templeName || "",
          icon: "",
          info: {
            title: res.templeName || "",
            coverImage: res.coverImage || "",
            address: res.location || "",
            linkText: "详细信息",
          },
        },
      ];
    }
  } catch (error) {
    uni.showToast({
      title: "网络异常，请稍后重试",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 媒体预览
const previewMedia = (url: string, type: "image" | "video") => {
  if (type === "image") {
    uni.previewImage({
      urls: imageList.value,
      current: url,
    });
  } else if (type === "video") {
    // 视频预览
    uni.navigateTo({
      url: `/pages/components/video-player?url=${encodeURIComponent(url)}`,
    });
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 页面加载时
onLoad((options: any) => {
  if (options && options.id) {
    templeId.value = options.id;
    fetchTempleDetail();
  } else {
    uni.showToast({
      title: "参数错误",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss">
/* 针对webkit内核浏览器的补充隐藏 */
.grid-video::-webkit-media-controls-download-button {
  display: none !important;
}
.grid-video::-webkit-media-controls-remote-playback-button {
  display: none !important;
}
.temple-detail {
  background-color: #f7f7f7;
  min-height: 100vh;
  position: relative;
}

.detail-header {
  position: relative;
  height: 400rpx;
  overflow: hidden;
}

.header-image {
  width: 100%;
  height: 100%;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
  .temple-title {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: #ffffff;
  }
}

.temple-title {
  display: flex;
  flex-direction: column;
  text {
    font-size: 38rpx;
    font-weight: bold;
  }

  .temple-subtitle {
    font-size: 28rpx;
    font-weight: normal;
    margin-top: 10rpx;
    opacity: 0.8;
  }
}

.temple-stats {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .stats-item {
    text-align: center;

    .stats-value {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #1989fa;
      margin-bottom: 10rpx;
    }

    .stats-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.temple-content {
  padding: 0 0 30rpx;
}

.content-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.intro-content {
  .intro-text {
    font-size: 28rpx;
    line-height: 1.8;
    color: #333;
    text-align: justify;

    text {
      white-space: pre-wrap;
      word-break: break-all;
    }
  }

  .media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .grid-image,
    .grid-video {
      width: 100%;
      border-radius: 12rpx;
      overflow: hidden;
      background-color: #f5f5f5;
    }

    .grid-video {
      position: relative;
    }
  }

  .image-grid-single {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .grid-image,
    .grid-video {
      width: 100%;
      height: 300rpx;
      border-radius: 12rpx;
      overflow: hidden;
      background-color: #f5f5f5;
    }
  }
}

.history-content {
  .time-line {
    position: relative;
    display: flex;
    padding: 16rpx 0;

    &:not(:last-child) {
      &::before {
        content: "";
        position: absolute;
        left: 10rpx;
        top: 40rpx;
        bottom: 0;
        width: 2rpx;
        background-color: #ddd;
      }
    }
  }

  .time-point {
    position: relative;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #1989fa;
    margin-right: 20rpx;
    margin-top: 14rpx;
  }

  .time-content {
    flex: 1;
  }

  .time-year {
    font-size: 32rpx;
    font-weight: bold;
    color: #1989fa;
    margin-bottom: 8rpx;
  }

  .time-desc {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
}

.contact-content {
  .contact-info {
    margin-bottom: 20rpx;
  }

  .contact-item {
    margin-bottom: 16rpx;
    font-size: 28rpx;
    display: flex;

    .contact-label {
      color: #666;
      width: 140rpx;
      flex-shrink: 0;
    }

    .contact-value {
      color: #333;
      flex: 1;
    }
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .loading-content {
    padding: 30rpx 60rpx;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10rpx;
  }

  .loading-text {
    color: #fff;
    font-size: 28rpx;
  }
}

.mt-3 {
  margin-top: 30rpx;
}
</style>
